import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View,
  Text,
  Button,
  AlertIOS,
  StyleSheet
} from 'react-native';

import Hello from './Hello';

class Home extends Component<{}> {
  state = {
    aaaa: 'hello state',
    index: 0,
  }
  // click = ()=>{
  //   console.log('click ok');
  //   this.setState({
  //     index: this.state.index+1,
  //     aaaa: this.state.aaaa + this.state.index,
  //   })
  //   AlertIOS.alert("title", "message");
  //
  // }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Home
        </Text>
        <Text style={styles.welcome}>
          Home
        </Text>
        <View style={styles.x}>
          <Text>
            hello
          </Text>
          <Text>
            hello
          </Text>
        </View>
        <Button
          title="Click me"
          color="#841584"
          onPress={this.props.click}
        accessibilityLabel="Learn more about this purple button"/>
        <Text style={styles.y}>
          {this.state.aaaa}
          {this.props.status}
        </Text>
        <Hello/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
  },
  welcome: {
    fontSize: 20,
    paddingTop: 10,
    textAlign: 'center',
    height: 50,
    backgroundColor: 'green',
  },
  x : {
    backgroundColor: 'yellow',
    flexDirection: 'row',
    height: 60,
    borderTopWidth: 3,
    borderTopColor: 'gray',
  },
  y : {
    backgroundColor: 'yellow',
    flexDirection: 'row',
    textAlign: 'center',
    paddingTop: 10,
    fontSize: 24,
    height: 60,
    borderTopWidth: 3,
    borderTopColor: 'gray',
  }
});

mapStateToProps = (state, ownProps) => {
  return {
    status: state.home.status
  };
}

mapDispatchToProps = (dispatch, ownProps) => {
  return {
    click : () => {
      console.log('clicked');
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);
